<template>
  <el-dialog v-loading="loading" v-model="dialogVisible" title="添加标签" width="800">
    <el-form :inline="false" :model="bindForm" class="demo-form-inline">
      <el-row>
        <el-col :span="8" :gutter="8">
          <el-form-item label="已绑标签">
            <el-input
                v-model="bindForm.labelName"
                placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="btn_group">
          <el-button @click="onResetBind">重置</el-button>
          <el-button type="primary" @click="onSearchBind">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="result">
      <el-table :data="bindTableData" border style="width: 100%" max-height="600">
        <el-table-column type="index" width="50" />
        <el-table-column prop="labelName" label="标签名" />
        <el-table-column prop="operator" label="操作" width="200">
          <template #default="scope">
            <el-button
                size="small"
                type="primary"
                @click="onUnBind(scope.row)"
            >
              解绑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="bindPager.currentPage"
          v-model:page-size="bindPager.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, ->, prev, pager, next, jumper, sizes"
          :total="pager.total"
          @size-change="bindHandleSizeChange"
          @current-change="bindHandleCurrentChange"
      />
    </div>

    <div><hr></div>
    <el-form :inline="false" :model="searchForm" class="demo-form-inline">
      <el-row>
        <el-col :span="8" :gutter="8">
          <el-form-item label="未绑标签">
            <el-input
                v-model="searchForm.labelName"
                placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="btn_group">
          <el-button @click="onReset">重置</el-button>
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="result">
      <el-table :data="tableData" border style="width: 100%" max-height="600">
        <el-table-column type="index" width="50" />
        <el-table-column prop="labelName" label="标签名" />
        <el-table-column prop="operator" label="操作" width="200">
          <template #default="scope">
            <el-button
                size="small"
                type="primary"
                @click="onBind(scope.row)"
            >
              绑定
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="pager.currentPage"
          v-model:page-size="pager.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, ->, prev, pager, next, jumper, sizes"
          :total="pager.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <div class="center-aligned-button">
      <el-button @click="onCancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, computed, watch } from "vue";
import {
  selectUnBindLabelPage,
  addLabel, unBindLabel, selectBindLabelPage,
} from "@/network/api";

const bindRequestData = () => {
  loading.value = true;
  selectBindLabelPage({
    labelName: bindForm.labelName,
    goodsId: props.param.id.toString(),
    size: bindPager.pageSize,
    current: bindPager.currentPage,
  })
      .then((res) => {
        if (res?.data) {
          bindPager.total = res.data.total;
          bindTableData.value = res.data.records || [];
        } else {
          bindPager.total = 0;
          bindTableData.value = [];
        }
      })
      .finally(() => {
        loading.value = false;
      });
};

const requestData = () => {
  loading.value = true;
  selectUnBindLabelPage({
    labelName: searchForm.labelName,
    goodsId: props.param.id.toString(),
    size: pager.pageSize,
    current: pager.currentPage,
  })
      .then((res) => {
        if (res?.data) {
          pager.total = res.data.total;
          tableData.value = res.data.records || [];
        } else {
          pager.total = 0;
          tableData.value = [];
        }
      })
      .finally(() => {
        loading.value = false;
      });
};
const searchForm = reactive({
  labelName: "",
  goodsId: "",
});
const pager = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});
const tableData = ref([]);
const onReset = () => {
  searchForm.labelName = "";
  onSearch();
};

const bindForm = reactive({
  labelName: "",
});
const bindPager = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});
const bindTableData = ref([]);
const onResetBind = () => {
  bindForm.labelName = "";
  onSearchBind();
};

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  param: {
    type: Object,
    default: null,
  },
});
const onSearch = () => {
  pager.currentPage = 1;
  requestData();
};
const onSearchBind = () => {
  bindPager.currentPage = 1;
  bindRequestData();
};
const loading = ref(false);
const emits = defineEmits(["update:show", "refresh"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(val) {
    emits("update:show", val);
  },
});
const handleSizeChange = (size) => {
  pager.pageSize = size;
  pager.currentPage = 1;
  requestData();
};
const handleCurrentChange = (cur) => {
  pager.currentPage = cur;
  requestData();
};
const bindHandleSizeChange = (size) => {
  pager.pageSize = size;
  pager.currentPage = 1;
  requestData();
};
const bindHandleCurrentChange = (cur) => {
  pager.currentPage = cur;
  requestData();
};
watch(dialogVisible, (value) => {
  if (value) {
    resetForm();
  }
  onSearch();
  onSearchBind();
});
const resetForm = () => {
  searchForm.labelName = "";
  bindForm.labelName = "";
};
const onCancel = () => {
  resetForm();
  emits("update:show", false);
};
const onBind = (row) => {
  addLabel({
    goodsId: props.param.id.toString(),
    labelId: row.id.toString(),
  }).then((res) => {
    if (res?.code === 200) {
      ElMessage({
        message: "edit success",
        type: "success",
      });
      resetForm();
      onSearch();
      onSearchBind();
    } else {
      ElMessage({
        message: "edit faild",
        type: "error",
      });
    }
  });
};
const onUnBind = (row) => {
  unBindLabel({
    goodsId: props.param.id.toString(),
    labelId: row.id.toString(),
  }).then((res) => {
    if (res?.code === 200) {
      ElMessage({
        message: "edit success",
        type: "success",
      });
      resetForm();
      onSearch();
      onSearchBind();
    } else {
      ElMessage({
        message: "edit faild",
        type: "error",
      });
    }
  });
};
</script>
<style lang="scss" scoped>
.btn_group {
  text-align: center;
}
.center-aligned-button{
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>
